<!-- 我的主页-动态 -->
<template>
  <div>
    <a-list class="layout" :bordered="false" :data="info.data">
      <template #item="{ item }">
        <a-list-item class="list-demo-item" action-layout="vertical">
          <template #actions>
            <a-space direction="vertical" fill class="actions">
              <a-space class="actions-options">
                <span
                  ><a-button
                    type="outline"
                    @click="changeActions(item.actions, 1)"
                  >
                    <template #icon>
                      <IconFont type="icon-zantongfill"></IconFont>
                    </template>

                    {{ item.actions.like ? '已赞同' : '赞同' }}
                  </a-button></span
                >
                <span @click="changeActions(item.actions, 2)">
                  <IconFont type="icon-pinglun"></IconFont>
                  {{
                    item.actions.comments === 0
                      ? '新增评论'
                      : `${item.actions.comments}条评论`
                  }}
                </span>
                <span @click="changeActions(item.actions, 3)">
                  <IconFont type="icon-fenxiangfangshi"></IconFont>

                  分享</span
                >
                <span @click="changeActions(item.actions, 4)">
                  <IconFont type="icon-iconfontzhizuobiaozhun023122"></IconFont>
                  {{ item.actions.collection ? '已收藏' : '收藏' }}
                </span>
                <span @click="changeActions(item.actions, 5)">
                  <IconFont type="icon-yiguanzhu"></IconFont>
                  {{ item.actions.follow ? '已关注' : '关注' }}
                </span>
              </a-space>
              <div class="actions-time">
                <div>发表了文章</div>
                <div style="margin-left: 20px">2023-07-03 15:58</div>
              </div>
            </a-space>
          </template>
          <!-- <template #extra>
            <div className="image-area">
              <img alt="arco-design" :src="item.imageSrc" />
            </div>
          </template> -->
          <a-list-item-meta class="description">
            <template #description>
              <div v-if="!isReadAll" style="display: flex">
                <div>
                  <img
                    alt="arco-design"
                    :src="item.description.img"
                    class="description-img"
                  />
                </div>
                <div>
                  <div class="description-content">
                    {{ item.description.content }}
                  </div>
                  <div class="description-readAll" @click="changeRead">
                    <div>
                      阅读全文
                      <IconFont type="icon-down"></IconFont>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                ....
                <div class="description-readAll" @click="changeRead">
                  收起
                  <IconFont type="icon-up"></IconFont>
                </div>
              </div>
            </template>
            <template #title>
              <div class="title">
                <h3>{{ item.title }}</h3>
                <div class="title-info">
                  <a-avatar shape="square">
                    <img alt="avatar" :src="item.userInfo.avatar" />
                  </a-avatar>
                  <div style="margin-left: 10px">
                    <div>{{ item.userInfo.name }}</div>
                    <div>{{ item.userInfo.position }}</div>
                  </div>
                </div>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script setup lang="ts">
const router = useRouter();

/* 
  title: 标题
  userInfo 用户信息
    avatar 用户头像
    name 用户名称
    position 用户职位
  description
    img 文章图片
    content 文章内容
  actions
    like 是否赞同 true已赞同 false没有赞同
    comments 评论数
    collection 是否收藏 true已收藏 false没有收藏
    follow 是否关注 true已关注 false没有关注
    time 发布时间
*/
const info = reactive({
  data: [
    {
      title: '产品需求分析',
      userInfo: {
        avatar:
          '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        name: 'King',
        position: '人事专员'
      },
      description: {
        img: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
        content:
          'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).'
      },
      actions: {
        like: true,
        comments: 200,
        collection: true,
        follow: true,
        time: '2023-07-03 15:58'
      }
    },
    {
      title: '程序持续性',
      userInfo: {
        avatar:
          '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        name: 'King',
        position: '人事专员'
      },
      description: {
        img: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
        content:
          'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).'
      },
      actions: {
        like: true,
        comments: 0,
        collection: false,
        follow: true,
        time: '2023-07-03 15:58'
      }
    },
    {
      title: '差实打实',
      userInfo: {
        avatar:
          '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        name: 'King',
        position: '人事专员'
      },
      description: {
        img: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
        content:
          'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).'
      },
      actions: {
        like: false,
        comments: 0,
        collection: false,
        follow: false,
        time: '2023-07-03 15:58'
      }
    }
  ]
});

let isReadAll = ref(false); // 是否点击了阅读全文
const changeRead = () => {
  isReadAll.value = !isReadAll.value;
};

const changeActions = async (item: any, val: number) => {
  switch (val) {
    case 1:
      item.like = !item.like;
      break;
    case 2:
      break;
    case 3:
      break;
    case 4:
      item.collection = !item.collection;
      break;
    case 5:
      item.follow = !item.follow;
      break;
    default:
      break;
  }
};
</script>
<style lang="less" scoped>
.wrap {
  .layout {
    .title {
      .title-info {
        display: flex;
      }
    }
    .description {
      &-img {
        width: 183px;
        height: 119px;
        border-radius: 2px;
        overflow: hidden;
      }

      &-content {
        overflow: hidden;
        // width: 680px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        word-break: break-all;
        margin-left: 20px;
      }

      &-readAll {
        float: right;
        color: #165dff;
        cursor: pointer;
      }
    }

    .actions {
      &-options span {
        margin-left: 10px;
      }
      &-time {
        display: flex;
      }
    }
  }
}
</style>
